<template>
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-4">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">病害出现频率占比</h3>
              <!--  搜索框  -->
              <div class="box-tools pull-right">
                <div class="has-feedback">
                  <el-button size="small" type="info" style="margin-bottom: 5px" @click="handleBack"><i class="fa fa-chevron-left"></i>&nbsp;&nbsp;返回</el-button>
                </div>
              </div>
            </div>
            <div class="box-body">
              <div id="diseaseCountCharts" style="height: 300px;"></div>
            </div>
          </div>
        </div>

        <div class="col-md-8">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">病害出现频率统计</h3>
            </div>
            <div class="box-body">
              <div id="diseaseCountColumnCharts" style="height: 300px;"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <FrontSideTable
            dataUrl="/decision/statDisease/getBridgeStatDiseaseList"
            :dataParam="{id:statDisease.id, inspectionYear:new Date(statDisease.inspectionYear)}"
            tableTitle="工程量汇总"
            :columns="columns"
            searchHint="输入关键字搜索，多个关键字用空格隔开"
            :searchProps="searchProps"
            :addable="false"
          customButton>
            <template slot="afterColumns">
              <el-table-column label="上部结构" align="center">
                <el-table-column label="W<0.15mm裂缝(m)" prop="superCrackLess" width="180"></el-table-column>
                <el-table-column label="W>=0.15mm裂缝(m)" prop="superCrackLarge" width="180"></el-table-column>
                <el-table-column label="破损(m²)" prop="superBroken" width="120"></el-table-column>
              </el-table-column>

              <el-table-column label="支座" align="center">
                <el-table-column label="剪切(个)" prop="supportCut" width="120"></el-table-column>
                <el-table-column label="偏位(个)" prop="supportOffset" width="120"></el-table-column>
                <el-table-column label="脱空(个)" prop="supportUntouch" width="120"></el-table-column>
                <el-table-column label="开裂(个)" prop="supportCrack" width="120"></el-table-column>
              </el-table-column>

              <el-table-column label="桥墩" align="center">
                <el-table-column label="W<0.15mm裂缝(m)" prop="pierCrackLess" width="180"></el-table-column>
                <el-table-column label="W>=0.15mm裂缝(m)" prop="pierCrackLarge" width="180"></el-table-column>
                <el-table-column label="破损(m²)" prop="pierBroken" width="120"></el-table-column>
              </el-table-column>

              <el-table-column label="桥台" align="center">
                <el-table-column label="W<0.15mm裂缝(m)" prop="abutmentCrackLess" width="180"></el-table-column>
                <el-table-column label="W>=0.15mm裂缝(m)" prop="abutmentCrackLarge" width="180"></el-table-column>
                <el-table-column label="破损(m²)" prop="abutmentBroken" width="120"></el-table-column>
              </el-table-column>

              <el-table-column label="锥护坡破损(m²)" prop="slopProtectorBroken" width="180"></el-table-column>

              <el-table-column label="桥面铺装" align="center">
                <el-table-column label="裂缝(m)" prop="deckCrack" width="120"></el-table-column>
                <el-table-column label="破损(m²)" prop="deckBroken" width="120"></el-table-column>
              </el-table-column>

              <el-table-column label="伸缩缝" align="center">
                <el-table-column label="锚固区缺陷(m²)" prop="expansionBroken" width="150"></el-table-column>
                <el-table-column label="橡胶条损坏(条)" prop="expansionOld" width="150"></el-table-column>
              </el-table-column>

              <el-table-column label="护栏破损(m²)" prop="guardBroken" width="120"></el-table-column>

              <el-table-column label="照明标志损坏(个)" prop="lightMiss" width="120"></el-table-column>
            </template>
          </FrontSideTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from "../../echarts"
  import FrontSideTable from "../template/FrontSideTable.vue"
  import {getDiseaseCountChartsOptions, getDiseaseCountColumnChartsOption} from "../../assets/js/utils/ViewUtils"
  import {doGet} from "../../assets/js/utils/RequestUtils";

  const VO_URL = "/decision/statDisease/getStatDiseaseVo";

  export default {
    name:"StatDiseaseDetail",
    data() {
      return {
        diseaseCountCharts:null,
        diseaseCountColumnCharts:null,
        searchProps:["bridgeName", "roadNo", "superstructureTypeName", "fullAddressName"],
        columns:[
          {prop:"bridgeName", label:"桥梁名称", width:"120", fixed:true},
          {prop:"roadNo", label:"路线号", width:"120"},
          {prop:"superstructureTypeName", label:"上部结构类型", width:"350"},
          {prop:"unitsName", label:"管养单位", width:"150"},
          {prop:"fullAddressName", label:"所在地", width:"240"}
        ]
      }
    },
    props:{
      statDisease: {
        type:Object,
        required:true
      }
    },
    methods:{
      initCharts() {
        this.diseaseCountCharts = echarts.init(document.getElementById("diseaseCountCharts"));
        this.diseaseCountColumnCharts = echarts.init(document.getElementById("diseaseCountColumnCharts"));
      },
      handleBack() {
        this.$emit("onBack");
      },
      fetchData() {
        doGet(VO_URL, {
          data:{id:this.statDisease.id, inspectionYear:new Date(this.statDisease.inspectionYear)},
          component:this
        }).then(response=>{
          if(response.length > 0) {
            this.diseaseCountColumnCharts.setOption(getDiseaseCountColumnChartsOption(response));
            this.diseaseCountCharts.setOption(getDiseaseCountChartsOptions(response));
          }else {
            this.$alert('统计范围内无病害', '提示');
          }
        });
      }
    },
    mounted() {
      this.initCharts();
      this.fetchData();
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// StatDiseaseDetail.vue?c386615a
